<template>
	<view class="content">
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in img" :key="index">
					<image :src="swiper" mode="aspectFit" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{img.length }}</view>
		</view>
		<view class="spms">
			<view class="price">
				<view class="" style="display: flex;align-items: center;">
					<view class="xprice">
						<text style="font-size: 28rpx;">￥</text><text>{{proinfo.price}}</text>
					</view>
					<view class="yprice" v-if="title=='兑换商品详情'">
						￥{{proinfo.oldprice}}
					</view>
				</view>
				<view class="jfbox" v-if="title=='兑换商品详情'">
					{{proinfo.price}}积分
				</view>

			</view>
			<view class="name">
				{{proinfo.name}}
			</view>
			<view class="tagsbox">
				<view class="tags">
					库存{{proinfo.num}}件
				</view>
				<view class="tags" v-if="title=='商品详情'">
					获得{{proinfo.return_score}}积分
				</view>
			</view>
			<view class="item_box flex" @click="show=true">
				<view class="left flex">
					<view class="label">
						选择
					</view>
					<view class="line">

					</view>
					<view class="label_name">
						选择商品规格
					</view>

				</view>
				<view class="right">
					<image class="right_icon" src="./static/more.png" mode=""></image>
				</view>
			</view>
			<view class="item_box flex">
				<view class="left flex">
					<view class="label">
						发货
					</view>
					<view class="line">

					</view>
					<view class="label_name">
						{{proinfo.send_address}}
					</view>
				</view>
				<view class="right">
					月销{{proinfo.monethnum}}
				</view>
			</view>
		</view>

		<view class="contline">

		</view>
		<view class="pro_info">
			<view class="info_title">
				<image style="width: 178rpx;position: absolute;" src="./static/bg.png" mode="widthFix"></image>
				<image style="width: 117rpx;" src="./static/titlebg.png" mode="widthFix"></image>
			</view>
			<view class="" style="padding: 0 30rpx;">
				<u-parse :content="proinfo.description" lazyLoad previewImg copyLink></u-parse>
			</view>
			
		</view>
		<view class="footer">
			<!-- <view class="footer_left" @click="clickto('/pages/product/smart')">
				<image class="sj_icon" src="./static/smart.png" mode=""></image>
				<view class="">
					商家
				</view>
			</view> -->

			<view class="footer_right1" @click="buy" v-if="title=='商品详情'">
				立即购买
			</view>
			<view class="footer_right1" @click="buy" v-if="title=='兑换商品详情'">
				立即兑换
			</view>
		</view>


		<!-- 弹框 -->
		<u-popup :show="show" round='30rpx' closeOnClickOverlay @close="show=false">
			<view class="popbox">
				<image class="cha_icon" src="./static/cha.png" @click="show=false" mode=""></image>
				<view class="sptop">
					<image class="propic" :src="ggcuri!=null?gglist[ggcuri].images:img[0]" mode="aspectFill"></image>
					<view class="poptopright">
						<view class="popprice">
							<image v-if="title=='兑换商品详情'" style="width: 22rpx;height: 22rpx;" src="./static/jf.png"
								mode=""></image>
							<text v-if="title=='商品详情'" style="font-size: 28rpx;">￥</text>
							<text v-if="title=='商品详情'">{{(ggcuri!=null?gglist[ggcuri].price:proinfo.price)}}</text>
							<text v-if="title=='兑换商品详情'">{{(ggcuri!=null?gglist[ggcuri].price:proinfo.price)}}</text>
						</view>
						<view class="popname">
							{{ggcuri!=null?gglist[ggcuri].text:proinfo.name}}
						</view>
					</view>
				</view>
				<view class="popgg">
					<view class="ggtitle">
						规格分类({{gglist.length}})
					</view>
					<scroll-view scroll-x="true" style="width: 689rpx;">
						<view class="ggbox">
							<view class="ggitem" :class="ggcuri==index?'active':''" @click="checkgg(item,index)"
								v-for="(item,index) in gglist" :key="index">
								<image class="ggpic" :src="item.images" mode="aspectFill"></image>
								<view class="ggname">
									{{item.text}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="numbox">
					<view class="numleft">
						购买数量
					</view>
					<u-number-box :min="1" :max="100" value="num">
						<view slot="minus" class="minus" @click="minus">
							<image class="jian" src="./static/jian.png" mode=""></image>
						</view>
						<text slot="input" style="width: 74rpx;text-align: center;font-size: 29rpx;color: #333;"
							class="input">{{num}}</text>
						<view slot="plus" class="plus" @click="plus">
							<image class="jia" src="./static/jia.png" mode=""></image>
						</view>
					</u-number-box>
				</view>
				<view v-if="title=='商品详情'" class="popbtn" @click="submit(0)">
					确认购买
				</view>
				<view v-if="title=='兑换商品详情'" class="popbtn" @click="submit(1)">
					确认兑换
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		productById,
		getgoodsSpec
	} from '@/api/product.js'
	import {
		addShopcar
	} from '@/api/home.js'
	export default {
		data() {
			return {
				gglist: [],
				num: 1,
				show: false,
				id: "",
				proinfo: {},
				marginTop: 0,
				ggcuri: null,
				ggid: '',
				poptype: '',
				popbtn: '',
				type: '',
				imglist: [],
				currentSwiper: 0, // 轮播图右下角数字
				img: [],
				title: ''
			};
		},
		methods: {
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			submit(i) {
				if (!this.ggid) {
					uni.showToast({
						title: '请选择商品规格',
						icon: 'none'
					})
					return
				}
				let title = ''
				if (i == 0) title = '确认订单'
				if (i == 1) title = '兑换确认订单'
				this.clickto('/pages/order/sureorder', title)
			},
			// 图片预览
			pre(url) {
				// console.log(url)
				uni.previewImage({
					urls: [url],
				});
			},
			prepic(index) {
				uni.previewImage({
					current: index,
					urls: this.imglist,
				});
			},
			clickto(url, title) {
				uni.$u.route(url, {
					id: this.id,
					num: this.num,
					ggid: this.ggid,
					type: this.type,
					user_id: this.proinfo.store,
					title
				})
			},
			getProdetail() {
				productById({
					id: this.id
				}).then(res => {
					this.proinfo = res.data.data
					this.proinfo.images.split(',').map(t => {
						this.img.push(this.$BASE_URL + t)
					})
					// console.log(this.proinfo.img)
					// this.proinfo.img = this.$BASE_URL + this.proinfo.images.split(',')[0]
					// this.imglist.push(this.$BASE_URL + this.proinfo.intro)
					this.share.title = this.proinfo.name
					// 获取规格列表
					getgoodsSpec({
						goods_id: this.id
					}).then(res => {
						this.gglist = res.data.data
						this.gglist.map(t => {
							t.images = this.$BASE_URL + t.image
						})
					})
				})
			},
			// 选择规格
			checkgg(i, t) {
				this.ggcuri = t
				this.ggid = this.gglist[t].id
				// console.log(this.ggcuri)
			},
			// 加购物车
			addshopcar() {
				this.show = true
				this.popbtn = '确定'
				this.poptype = 'shopcar'

			},
			buy() {
				this.show = true
				this.popbtn = '立即购买'
				this.poptype = 'buy'
			},
			minus() { //减数量
				if (this.num > 1) {
					this.num--
				}
			},
			plus() { //加数量
				this.num++
			}
		},
		onLoad: function(option) {
			this.title = decodeURI(option.title)
			uni.setNavigationBarTitle({
				title: decodeURI(option.title)
			})
			this.id = option.id
			this.marginTop = 44 + uni.getStorageSync('statusBarHeight')
			this.type = option.type
		},
		mounted() {
			this.getProdetail()
		}
	}
</script>

<style lang="less">
	.content {

		padding-bottom: 149rpx;

		.pro_pic {
			width: 750rpx;
			height: 795rpx;
		}

		.spms {
			padding: 24rpx 30rpx 24rpx 24rpx;

			.price {
				display: flex;
				justify-content: space-between;

				.jfbox {
					line-height: 41rpx;
					height: 41rpx;
					background: linear-gradient(142deg, rgba(255, 160, 8, .2), rgba(255, 131, 5, .2));
					// opacity: 0.2;
					border-radius: 21rpx;
					padding: 0 18rpx;
					color: #FF5F00;
					font-size: 27rpx;
					font-style: italic;
				}

				.xprice {
					color: #FF4E31;
					font-size: 42rpx;
					font-weight: bold;
				}

				.yprice {
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;
					padding-top: 16rpx;
					margin-left: 17rpx;
				}
			}
		}

		.name {
			color: #333333;
			font-size: 33rpx;
			font-weight: bold;
			margin-top: 24rpx;
		}

		.tagsbox {
			display: flex;
			align-items: center;

			.tags {
				padding: 0 14rpx;
				line-height: 36rpx;
				border: 1rpx solid rgba(255, 113, 90, .3);
				border-radius: 18rpx;
				font-size: 20rpx;
				color: #FF4E31;
				margin-right: 10rpx;
				margin-top: 20rpx;
			}
		}

		.item_box {
			justify-content: space-between;
			margin-top: 36rpx;
			margin-bottom: 18rpx;

			.right_icon {
				width: 13rpx;
				height: 22rpx;
			}

			.label {
				color: #9C9C9C;
				font-size: 28rpx;

			}

			.label_name {
				color: #333333;
				font-size: 28rpx;
			}

			.line {
				width: 3rpx;
				height: 23rpx;
				background: #ECEBEA;
				margin: 0 21rpx 0 18rpx;
			}

			.right {
				color: #9C9C9C;
				font-size: 28rpx;
			}
		}
	}

	.contline {
		width: 750rpx;
		height: 19rpx;
		background: #F7F6F6;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.pro_info {
		.info_title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 35rpx 0 30rpx;
			position: relative;
		}

		.bg_icon {
			width: 19rpx;
			height: 10rpx;
		}
	}

	.footer {
		width: calc(750rpx - 73rpx);
		height: 149rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 33rpx 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer_left {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #686868;
			font-size: 22rpx;

			.sj_icon {
				width: 37rpx;
				height: 36rpx;
				margin-bottom: 12rpx;
			}
		}

		.footer_right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 93rpx;

			.btnleft {
				width: 303rpx;
				background: #FF9107;
				border-radius: 47rpx 0px 0px 47rpx;
			}

			.btnright {
				width: 303rpx;
				background: #F6570A;
				border-radius: 0px 47rpx 47rpx 0px;
				margin-left: 1rpx;
			}
		}

		.footer_right1 {
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 93rpx;

			background: #F6570A;
			width: 606rpx;
			border-radius: 47rpx;
		}
	}

	.popbox {
		padding: 47rpx 34rpx 40rpx 25rpx;
		position: relative;

		.cha_icon {
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			top: 48rpx;
			right: 34rpx;
		}

		.sptop {
			display: flex;
			align-items: center;
			margin-bottom: 76rpx;

			.propic {
				width: 115rpx;
				height: 115rpx;
				border-radius: 10rpx;
				margin-right: 23rpx;
			}

			.popprice {
				color: #FF4E31;
				font-size: 42rpx;
				font-weight: bold;
			}

			.popname {
				color: #333;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}

		.ggtitle {
			color: #000000;
			font-size: 30rpx;
			margin-bottom: 22rpx;
		}

		.ggbox {
			display: flex;
			align-items: center;

			.ggitem {
				border-radius: 10rpx;
				// border: 1rpx solid #FF4E31;
				margin-right: 15rpx;
				overflow: hidden;

				.ggpic {
					width: 219rpx;
					height: 208rpx;
				}

				.ggname {
					background-color: #F5F5F5;
					line-height: 56rpx;
					text-align: center;
					font-size: 22rpx;
					color: #333;
					margin-top: -3px;
					border-radius: 0px 0px 10rpx 10rpx;
				}
			}

			.active {

				border: 2rpx solid #FF4E31;
			}
		}

		.popbtn {
			width: 687rpx;
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
		}

		.numbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 55rpx;
			padding-left: 4rpx;
			margin-top: 80rpx;

			.numleft {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.minus {
				width: 51rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1rpx solid #DFDFDF;

				.jian {
					width: 14rpx;
					height: 2rpx;
				}
			}

			.plus {
				width: 51rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1rpx solid #DFDFDF;

				.jia {
					width: 16rpx;
					height: 16rpx;
				}
			}

			.u-number-box {
				border-radius: 10rpx;

				border: 1rpx solid #DFDFDF;
			}
		}
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
</style>